<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta charset="utf-8">
    <title>GMU Demos</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/player.css" />
    <link rel="stylesheet" type="text/css" href="gmu/gmu.css" />
    <link rel="stylesheet" type="text/css" href="css/demo.css" />
    <style type="text/css">
        body {
            background: #505050;
        }
    </style>
    <script type="text/javascript" src="gmu/zepto.js"></script>
    <script type="text/javascript" src="gmu/gmu.js"></script>
    <script type="text/javascript" src="gmu/event.js"></script>
    <script type="text/javascript" src="js/widgets.js"></script>
    <script type="text/javascript" src="js/player.js"></script>
</head>
<body>
<hearder class="hearder">
	<h3>播放器</h3>
</hearder>
<div id="">

	<div id="music_box">
		<ul id="MusicList">
			<li class="active">
				<div class="music_info">
					<div class="music_overlay" style="background-image:url(audio/audio-1.jpg)" data-src="1" song-name="Let it go" singe="《冰雪奇缘》"></div>
				</div>
			</li>

			<li>
				<div class="music_info">
					<div class="music_overlay" style="background-image:url(audio/audio-2.jpg)" data-src="2" song-name="GreenPeace Ska" singe="板砖乐队《音渡神游》"></div>
				</div>
			</li>
		</ul>
	</div>


	<!-- 当前播放的音乐 -->
	<div class="nowPlayer">
		<p class="songName" id="CurrentPlayName">准备播放</p>
	</div>
	<!-- 进度条状态 -->
	<div class="ProcessControl">
		<div id="progressbar"></div>
		<div class="SongTime l">00:00</div>
		<div class="SongTime r">00:00</div>
	</div>
	<!-- <div class="toolsBar">
		<div><i class="icon-heart"></i><span>favourite</span></div>
		<div><i class="icon-shuffle"></i><span>shuffle</span></div>
		<div><i class="icon-loop-alt1"></i><span>repeat</span></div>
	</div> -->
	<!-- 播放器控制组件 -->
	<div class="PlayControls">
		<!-- 播放按钮 -->
		<div id="play"><i class="icon-play"></i></div>
		<!-- 暂停按钮 -->
		<div id="pause"><i class="icon-pause"></i></div>
		<!-- 下一曲 -->
		<div id="next"><i class="icon-next"></i></div>
		<!-- 上一曲 -->
		<div id="prev"><i class="icon-previous"></i></div>
	</div>
	 
	<!-- 播放器 -->
	<audio id="playMusic" data-src="" data-src-flag=""></audio>
</div>
<script>
	//创建横向组件
    $('#progressbar').progressbar();
   
</script>
</body>
</html>